<script setup>
import { ref, onMounted, inject } from 'vue'
import { useRoute } from 'vue-router';
import Menu from '@/views/menu/menu.vue'
import Content from '@/views/content/content.vue'
import { useFunctionTreeStore } from '@/stores/functionTree'
const functionTreeStore = useFunctionTreeStore()
//对应内容组件
import Defaultc from '@/views/content/components/defaultc.vue'
import ProductManage from '@/views/content/components/product/inProduct/productManage.vue'
import ClassifyManage from '@/views/content/components/product/inProduct/classifyManage.vue'
import ChargeManage from '@/views/content/components/product/productExtend/chargeManage.vue'
import SpecificationManage from '@/views/content/components/product/productExtend/specificationManage.vue'
import PropertyManage from '@/views/content/components/product/productExtend/propertyManage.vue'
import UnitManage from '@/views/content/components/product/productExtend/unitManage.vue'
import LabelManage from '@/views/content/components/product/productExtend/labelManage.vue'



const f2List = ref([])

onMounted(() => {
  const route = useRoute()
  const f2ListIdStr = route.query.f2ListId
  console.log('f2ListId:' + f2ListIdStr)
  if (f2ListIdStr) {
    console.log('f2ListId：' + f2ListIdStr)
    f2List.value = functionTreeStore.functionTreeInfo[f2ListIdStr].children
    return
  }
});

//接收左侧菜单组件消息
const dynamicComponentName = ref('')
const getCname = (cname) => {
  console.log('收到消息：' + cname)
  dynamicComponentName.value = cname
}



const getDynamicComponentName = () => {
  //动态加载内容组件
  if (dynamicComponentName.value === 'productManage') {
    return ProductManage
  }
  if (dynamicComponentName.value === 'classify') {
    return ClassifyManage
  }
  if (dynamicComponentName.value === 'specification') {
    return SpecificationManage
  }
  if (dynamicComponentName.value === 'property') {
    return PropertyManage
  }
  if (dynamicComponentName.value === 'charge') {
    return ChargeManage
  }
  if (dynamicComponentName.value === 'unit') {
    return UnitManage
  } if (dynamicComponentName.value === 'label') {
    return LabelManage
  }
  if (dynamicComponentName.value === 'quickImport') {
    return
  }
  else {
    return ProductManage
  }
}

</script>
<template>
  <div class="channel">
    <div class="menu">
      <Menu :f2List="f2List" @cname="getCname"></Menu>
    </div>
    <div>
      <div style="width: 220px;"></div>
    </div>
   
    <div class="content">
      <Content :f2List="f2List" >
        <component :is="getDynamicComponentName()">
        </component>
      </Content>
    </div>
  </div>
</template>

<style scoped>
</style>